<script setup lang="ts">
import { useEcharts } from '@hooks/useChart'
import { registerMap } from 'echarts/core'
import type { EChartsCoreOption } from 'echarts/core'
import { ref, Ref, onMounted } from 'vue'
import chinaJSON from '@/assets/json/china.json'

const orderDistribute: Ref<null | HTMLElement> = ref(null)

const init = () => {
  // @ts-ignore
  registerMap('china', { geoJSON: chinaJSON }) //注册可用的地图

  let dataList = [
    {
      name: '北京市',
      value: 54
    },
    {
      name: '南海诸岛',
      value: 0
    },
    {
      name: '天津市',
      value: 13
    },
    {
      name: '上海市',
      value: 40
    },
    {
      name: '重庆市',
      value: 75
    },
    {
      name: '河北省',
      value: 13
    },
    {
      name: '河南省',
      value: 83
    },
    {
      name: '云南省',
      value: 11
    },
    {
      name: '辽宁省',
      value: 19
    },
    {
      name: '黑龙江省',
      value: 15
    },
    {
      name: '湖南省',
      value: 69
    },
    {
      name: '安徽省',
      value: 60
    },
    {
      name: '山东省',
      value: 39
    },
    {
      name: '新疆维吾尔自治区',
      value: 4
    },
    {
      name: '江苏省',
      value: 31
    },
    {
      name: '浙江省',
      value: 104
    },
    {
      name: '江西省',
      value: 36
    },
    {
      name: '湖北省',
      value: 1052
    },
    {
      name: '广西壮族自治区',
      value: 33
    },
    {
      name: '甘肃省',
      value: 7
    },
    {
      name: '山西省',
      value: 9
    },
    {
      name: '内蒙古自治区',
      value: 7
    },
    {
      name: '陕西省',
      value: 22
    },
    {
      name: '吉林省',
      value: 4
    },
    {
      name: '福建省',
      value: 18
    },
    {
      name: '贵州省',
      value: 5
    },
    {
      name: '广东省',
      value: 98
    },
    {
      name: '青海省',
      value: 1
    },
    {
      name: '西藏自治区',
      value: 0
    },
    {
      name: '四川省',
      value: 44
    },
    {
      name: '宁夏回族自治区',
      value: 4
    },
    {
      name: '海南省',
      value: 22
    },
    {
      name: '台湾省',
      value: 3
    },
    {
      name: '香港自治区',
      value: 5
    },
    {
      name: '澳门自治区',
      value: 5
    }
  ]
  const options: EChartsCoreOption = {
    title: {
      text: '202x年全国销售额分布',
      top: '10px',
      left: 'center'
    },

    toolbox: {
      show: true,
      feature: {
        dataView: { show: true, readOnly: true },
        saveAsImage: { show: true }
      }
    },
    tooltip: {
      triggerOn: 'mousemove',
      padding: 8,
      borderWidth: 1,
      borderColor: '#409eff',
      backgroundColor: 'rgba(0,0,0,0.7)',
      textStyle: {
        color: '#fff',
        fontSize: 13
      },
      formatter: function (e: any) {
        let context = `
          <div>
              <p><b style="font-size:15px;">${e.name}</b>202x年销售额：</p>
              <p class="tooltip_style">${e.value}w</p>
          </div>
          `
        return context
      }
    },
    // 热力地图
    visualMap: {
      min: 0,
      max: 1000,
      left: 20,
      top: '30%',
      color: '#fff',
      pieces: [
        {
          gt: 100,
          label: '> 100 w',
          color: 'rgba(255, 70, 0, 0.9)'
        },
        {
          gte: 10,
          lte: 100,
          label: '10 - 100 w',
          color: 'rgba(255, 120, 0, 0.7)'
        },
        {
          gte: 1,
          lt: 10,
          label: '1 - 9 w',
          color: 'rgba(255, 120, 0, 0.4)'
        },
        {
          value: 0,
          label: '无',
          color: 'rgba(255, 200, 200, 0.9)' 
        }
      ]
    },

    series: [
      {
        name: '销售额',
        data: dataList,
        type: 'map',
        map: 'china',
        roam: true, //是否允许缩放，拖拽
        label: {
          // 默认文本标签样式
          color: '#fff',
          show: true
        },
        aspectScale: 0.8, // 长宽比
        zoom: 1.4, //初始化大小
        //缩放大小限制
        scaleLimit: {
          min: 0.5, //最小
          max: 12 //最大
        },
        //设置中心点
        center: [104.97, 35.71],
        itemStyle: {
          areaColor: 'rgba(10, 50, 233, 0.2)', //背景色
          color: 'red', //字体颜色
          borderColor: '#5e84fd',
          borderWidth: 1
        },
        //高亮状态
        emphasis: {
          label: {
            color: '#709',
            fontSize: 20,
            fontWeight: 'bold'
          },
          itemStyle: {
            areaColor: '#6486e5',
            color: '#fff',
            // 阴影
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            shadowBlur: 10,
            shadowOffsetY: 10
          }
        }
      }
    ]
  }
  useEcharts(orderDistribute.value as HTMLElement, options)
}

onMounted(init)
</script>
<template>
  <div
    ref="orderDistribute"
    :style="{
      width: '100%',
      height: '100%'
    }"
    style="margin: 0 auto"
  ></div>
</template>
<style lang="scss"></style>
